<template>
  <div class="categoryList">
    <!-- 标签栏 -->
    <van-tabs active="active" @click="resFn">
      <van-tab
        :title="item.name"
        v-for="(item, index) in categoryList"
        :key="index"
      >
        <h3>{{ item.name }}</h3>
        <p>{{ item.front_name }}</p>
      </van-tab>
    </van-tabs>



    <ul>
      <li v-for="item in goodsList" :key="item.id" @click="gotoDetail(item)">
        <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <span>{{ item.retail_price | formatMoney }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { categories } from "@/utils/http";
import { searchGoods } from "@/utils/http";
export default {
  name: "",
  props: [""],
  data() {
    return {
      active: 0,
      id: "",
      categoryList: [], //所有的类别
      categoryId: 0, //类别id 全部  居家等等...
      goodsList: [], //商品列表数据
      sort: "id", //排序方式 根据分类id 还是价格price
    };
  },
  components: {},
  methods: {
    resFn(title) {
      console.log(this.categoryList[title].id);
      searchGoods({categoryId:this.categoryList[title].id,page:1,size:1000}).then((res) => {
      console.log(res);
      this.goodsList = res.data.data.goodsList;
    });
    },
  },
  created() {
    categories(this.$route.query).then((res) => {
      console.log(res);
      this.categoryList = res.data.data.categoryList;
    });
    // this.resFn()
    searchGoods({categoryId:this.$route.query.id,page:1,size:1000}).then((res) => {
      console.log(res);
      this.goodsList = res.data.data.goodsList;
    });
    
  },
};
</script>
<style lang='less' scoped>
.categoryList {
  text-align: center;
  h3 {
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 10px;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    padding: 3px;
    box-sizing: border-box;
    img {
      width: 100%;
      display: block;
    }
    p {
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span {
      font-size: 16px;
      text-align: center;
    //   margin-left: 30px;
      color: purple;
    }
  }
}
</style>